<template>
  <h2>监听器</h2>
  <input
    type="text"
    name=""
    id=""
    v-model="Inputstr"
    :disabled="isdistabl"
    placeholder="请输入信息"
  />
  <p>接口的回答：{{ dataInfo }}</p>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { debounce } from 'lodash'

let Inputstr = ref('')
let dataInfo = ref('')

interface Idata {
  data: string
  msg: string
  coke: number | string
}

function funData() {
  return new Promise<Idata>((slover) => {
    setTimeout(() => {
      slover({
        data: '你好，我还没有get到您的问题，请稍后重试',
        msg: 'ok',
        coke: 200
      })
    }, 1000)
  })
}
let isdistabl = ref(false)
watch(
  Inputstr,
  debounce(async (newVal, oldVal) => {
    isdistabl.value = true
    let { data } = await funData()
    isdistabl.value = false
    dataInfo.value = data

    console.log(newVal)
    console.log(oldVal)
  }, 500)
)
</script>

<style></style>
